*{margin: 0;padding: 0;box-sizing: border-box;user-select: none;}
ul{list-style: none;}
.center{margin-left: auto;margin-right: auto;}
html, body{position: relative;z-index: 1;width: 100%;height: 100%;}
#app{width: 100%;height: 100%;background: url('../img/reward.jpg') no-repeat center bottom/cover;}
.wrapper{width: 100%;height: 100%;display: -webkit-flex;display: flex;align-items: center;padding-top: 60px;transition: all .8s;position: absolute;top:0;left: 0;}
.wrapper-hide{transform: rotateY(360deg) scale(0);}
.hide{display: none !important;}
.column-left{width: 800px;}
.column-right{width: 1120px;}
.clt{background: url(../img/left.png) no-repeat center center;width: 683px;height: 707px;position: relative;margin-left: 100px;padding: 12px;}
.clt-title{width: 661px;height: 224px;background: url(../img/title_a.png) no-repeat center;position: absolute;top: -106px;left: 11px;z-index: 9999;}
.clt-mask{position: absolute;z-index: 9999;left: 11px;bottom: 11px;background: url(../img/left-mask.png) no-repeat 50% bottom;width: 661px;height: 276px;}
.btn-prev, .btn-next{position: absolute;bottom: 42px;width: 92px;height: 92px;background-position: 0 0;background-size: cover;cursor: pointer;}
.btn-prev{background-image: url(../img/prev.png);left: 20px;}
.btn-prev.disabled, .btn-prev:active{background-image: url(../img/prev_active.png);}
.btn-next{background-image: url(../img/next.png);right: 20px;}
.btn-next.disabled, .btn-next:active{background-image: url(../img/next_active.png);}
.prize-imgs{width: 100%;height: 100%;position: relative;overflow: hidden;}
.prize-imgs li{width: 100%;position: absolute;top: 0;left: 100%;transition: all .3s;}
.prize-imgs li.active{left: 0;}
.prize-imgs li.front{left: -100%;}
.prize-img{display: block;margin: auto;}
.goods-list{width: 400px; height: 160px;position: relative;margin-top: 100px;text-align: center;list-style: none;overflow: hidden;}
.goods-list li{width: 100%;height: 100%;font-size: 60px;color: #ffeedb;display: flex;flex-direction: column;align-items: center;justify-content: center;transition: all .3s;position: absolute;left: 100%;}
.goods-list li.active{left: 0;}
.goods-list li.front{left: -100%;}
.goods-name{font-size: 50px;}
.goods-num{font-size: 80px;line-height: 1.2;}
.member-num{width: 678px;height: 141px;background: url(../img/tongji.png) no-repeat 50% 50%;margin-left: 102px;margin-top: 24px;display: -webkit-flex;display: flex;color: #ffeedb;font-size: 40px;align-items: center;padding: 0 36px;}
.flex_1{flex: 1;}
.member-num strong{font-size: 60px;}

.crt{background: url(../img/right.png) no-repeat center center;width: 993px;height: 707px;position: relative;margin-left: 26px;padding: 12px;}
.crt-title{width: 629px;height: 231px;position: absolute;top: -109px;left: 195px;z-index: 9999;}
.crt-title_bg1{background: url(../img/title_b.png) no-repeat center;}
.crt-title_bg2{background: url(../img/title_c.png) no-repeat center;}
.crt-title_bg3{background: url(../img/title_d.png) no-repeat center;}

.winning{padding: 0 4px;overflow: auto;height: 594px;margin-top: 90px;display: inline-flex;flex-wrap: wrap;justify-content: center;width: 100%;}
.winning-item{display: inline-flex;align-items: center;flex-direction: column;margin-bottom: 26px;width: 220px;align-self: center;}
.headimg{width: 126px;height: 126px;border-radius: 50%;border: 3px solid #FFEEDB;box-shadow: 0 0 10px #FFEEDB;}
.winning-name{font-size: 24px;color: #FFEEDB;margin-top: 8px;}

.nobody{width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;font-size: 36px;color: #43362c;line-height: 80px;padding-bottom: 40px}
.new-rolling, .new-winner{width: 100%;height: 100%;padding-top: 60px;font-size: 54px;color: #FFEEDB;text-align: center;line-height: 120px;display: inline-flex;justify-content: center;align-items: center;}
.rolling-item{margin: 0 40px;position: relative;}
.new-winner{background: url(../img/winner.png) 50% 50% no-repeat;}
.head-canvas{width: 120px;height: 120px;border-radius: 50%;}
.btn-box{display: -webkit-flex;display: flex;height: 141px;margin-top: 24px;align-items: center;margin-left: 28px;width: 987px;}
.btn-start, .btn-stop{display: block;width: 457px;height: 131px;}
.btn-start{background: url(../img/start.png) no-repeat 0 0;margin: auto;}
.btn-start:active{background: url(../img/start_active.png) no-repeat 0 0;}
.btn-stop{background: url(../img/stop.png) no-repeat 0 0;}
.btn-stop:active{background: url(../img/stop_active.png) no-repeat 0 0;}
.canvasbox{transition: all 0.8s;padding: 0 50px;}
.lottery-result{position: fixed;z-index: 9999;top: 50%;left: 50%;transform: translate(-50%, -50%);display: inline-flex;width: 100%;align-content: center;align-items: center;justify-content: center;flex-wrap: wrap;}
.winner-imgbg{position: relative;padding: 6px 16px;}
.newest-mask{position: absolute;top: 0;left: 0;z-index: 5;width: 100%;}
.newest{width: 240px;height: 240px;border-radius: 50%;display: block;}
.newest-name{font-size: 30px;color: #fff;text-align: center;margin-top: 15px;-webkit-animation:mymove 1.2s infinite;animation:mymove 1.2s infinite;}
.end-close{display: block;height: 50px;position: fixed;bottom: 30px;background-color: #d2291b;text-align: center;line-height: 50px;font-size: 24px;border-radius: 5px;color: #fff;cursor: pointer;left: 50%;transform: translateX(-50%);padding: 0 50px;}

@-webkit-keyframes mymove
{
0% {color:#fff;}
50% {color:red;}
100% {color:#fff;}
}
@keyframes mymove
{
0% {color:#fff;}
50% {color:red;}
100% {color:#fff;}
}

.end-tips{position: absolute;bottom: 25px;color: #fff;font-size: 24px;text-align: center;width: 100%;-webkit-animation:mymove 1.2s infinite;animation:mymove 1.2s infinite;left: 0;}
canvas{display: block;}



::-webkit-scrollbar{width: 0;height: 0;}
